<template>
    <div class="app-container">

        <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">

            <el-col :span="6">
                <el-form-item label="供应商名称:" prop="supplierName">
                    <el-input maxlength="30" v-model="queryParams.supplierName" clearable
                              placeholder="请输入供应商名称"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="供应商类型:" prop="supplierTypeCode">
                    <el-select filterable v-model="queryParams.supplierTypeCode" clearable>
                        <template v-for="dict in dict.type.supplier_type">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="业务分类:" prop="businessTypeCode">
                    <el-select filterable v-model="queryParams.businessTypeCode" clearable>
                        <template v-for="dict in dict.type.supplier_business_type">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="状态:" prop="availableStatus">
                    <el-select filterable v-model="queryParams.availableStatus" clearable>
                        <template v-for="dict in dict.type.supplier_status">
                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <!--      <el-col :span="6">-->
            <!--        <el-form-item label="审批状态:" prop="approvalStatus">-->
            <!--          <el-select filterable v-model="queryParams.approvalStatus" clearable>-->
            <!--            <template v-for="dict in dict.type.supplier_approval_status">-->
            <!--              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>-->
            <!--            </template>-->
            <!--          </el-select>-->
            <!--        </el-form-item>-->
            <!--      </el-col>-->


            <el-col :span="6">
                <el-form-item label="城市:" prop="cityName">
                    <el-input maxlength="30" v-model="queryParams.cityName" clearable
                              placeholder="请输入城市名称"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="提交时间:" prop="submitStartTime">
                    <el-date-picker
                        v-model="timeRange"
                        type="daterange"
                        align="left"
                        unlink-panels
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="合约期限:" prop="contractTerm">
                    <el-input maxlength="30" type="text" onkeyup="value=value.replace(/[^\d]/g,'')" :maxlength="8"
                              v-model="queryParams.contractTerm" placeholder="请输入天数"/>
                </el-form-item>
            </el-col>

        </SearchContent>

        <div class="card-wrap card-padding">
            <div class="table-title-wrap justify-end">
                <el-button type="primary" size="mini" @click="handleAdd"
                           v-hasPermi="['vendorManage:vendorList:add']">新增
                </el-button>
                <el-button type="success" size="mini" @click="handleExport"
                           v-hasPermi="['vendorManage:vendorList:export']">导出
                </el-button>
                <el-button type="warning" size="mini" @click="importData"
                           v-hasPermi="['vendorManage:vendorList:batchadd']">批量导入
                </el-button>
            </div>

            <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column label="操作" min-width="130" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <!--                0.待审批，1.审批中，2审批通过，3审批拒绝（作废）
                                   供应商审批状态：0.未提交，1.待审批，2通过，3驳回，4拒绝-->
                            <e-button size="mini" type="text" @click="handleUpdate(scope.row)"
                                      v-if="0==scope.row.approvalStatus||3==scope.row.approvalStatus||4==scope.row.approvalStatus"
                                      v-hasPermi="['vendorManage:vendorList:edit']">编辑
                            </e-button>
                            <e-button size="mini" type="text" @click="handleDelete(scope.row)"
                                      v-if="(0==scope.row.approvalStatus||2==scope.row.approvalStatus||3==scope.row.approvalStatus||4==scope.row.approvalStatus) && 0==scope.row.delStatus"
                                      v-hasPermi="['vendorManage:vendorList:delete']">删除
                            </e-button>
                            <e-button size="mini" type="text" @click="handleDetail(scope.row)"
                                      v-hasPermi="['vendorManage:vendorList:view']">查看
                            </e-button>
                            <e-button size="mini" type="text" @click="handleExchange(scope.row)"
                                      v-if="2==scope.row.approvalStatus"
                                      v-hasPermi="['vendorManage:vendorList:transfer']">变更
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column show-overflow-tooltip min-width="210" label="供应商编码" align="center" prop="supplierCode">
                        <template v-slot="{row}">
                            {{ row.supplierCode|filterNull }}
                        </template>
                    </el-table-column>

                    <el-table-column show-overflow-tooltip min-width="130" label="供应商名称" align="center" prop="supplierName">
                        <template v-slot="{row}">
                            {{ row.supplierName|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="100" label="供应商类型" align="center" prop="supplierType">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.supplier_type"
                                :value="scope.row.supplierType"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="100" label="业务分类" align="center" prop="businessType">
                        <template v-slot="{row}">
                            {{ row.businessType|filterNull }}
                        </template>
                    </el-table-column>

                    <el-table-column show-overflow-tooltip min-width="100" label="城市" align="center" prop="cityName">
                        <template v-slot="{row}">
                            {{ row.cityName|filterNull }}
                        </template>
                    </el-table-column>

                    <el-table-column show-overflow-tooltip min-width="100" label="状态" align="center" prop="availableStatus">
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.supplier_status"
                                :value="scope.row.availableStatus"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="130" label="审批状态" align="center" prop="expenseStatus">
                        <template slot-scope="scope">
                            {{ scope.row.expenseStatus|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="130" label="联系人" align="center" prop="contact">
                        <template v-slot="{row}">
                            {{ row.contact|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="130" label="联系电话" align="center" prop="contactPhone">
                        <template v-slot="{row}">
                            {{ row.contactPhone|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="150" label="提交时间" align="center" prop="submitTime">
                        <template v-slot="{row}">
                            {{ row.submitTime|filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip min-width="130" label="合约期限" align="center" prop="contractTerm">
                        <template slot-scope="scope">
                            {{ scope.row.contractTerm ? (scope.row.contractTerm + '天') : '--' }}
                        </template>
                    </el-table-column>
                </template>
            </table-page>

        </div>


        <!-- 添加或修改测试单表对话框 -->
        <el-dialog :title="title" :visible.sync="open" append-to-body width="45%">
            <el-form ref="form" :rules="rules" :model="form" label-width="120px">

                <el-row>
                    <el-col :span="20">
                        <el-form-item label="选择业务分类:" prop="businessTypeCode">
                            <el-select filterable
                                       @change="$forceUpdate()"
                                       v-model="form.businessTypeCode" clearable style="width: 90%">
                                <template v-for="dict in dict.type.supplier_business_type">
                                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="cancel">{{ isNew ? '取消' : '关闭' }}</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm" v-if="isNew">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import {supplierList, supplierDelete, supplierUpdate, IMPORTVENDOR} from "@/api/memberManage/vendorList";
import {TEMPLATEDRIVER} from "@/api/memberManage/driverList";

export default {
    name:"VendorList",
    components: {
        SearchContent
    },
    dicts: ['supplier_type', 'supplier_business_type', 'supplier_status', 'supplier_approval_status'],
    // mixins:[SearchMixin],
    data() {
        return {
            timeRange: [],
            //按钮loading
            buttonLoading: false,
            publicLoading: false,
            quotaloading: false,
            // 遮罩层
            loading: true,
            isNew: true,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                supplierName: null,
                supplierTypeCode: null,
                businessTypeCode: null,
                availableStatus: null,
                approvalStatus: null,
                cityName: null,
                submitStartTime: null,
                submitEndTime: null,
                contractTerm: null,
            },

            total: 0,
            dataList: [],
            quotaTotal: 0,
            quotaList: [],
            quotaParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                businessTypeCode: [
                    {required: true, message: "业务分类不能为空", trigger: "change"}
                ],
            },
        };
    },
    created() {
        this.getList()
    },
    activated() {
        this.getList()
    },
    methods: {
        /** 查询测试单表列表 */
        getList() {
            this.loading = true;

            this.queryParams.submitStartTime = this.timeRange && this.timeRange[0] ? this.timeRange[0] : ''
            this.queryParams.submitEndTime = this.timeRange && this.timeRange[1] ? this.timeRange[1] : ''


            supplierList(this.queryParams).then(res => {
                if (res.code == "200") {
                    const {rows, total} = res
                    this.dataList = rows
                    this.total = total
                    this.loading = false;
                }

            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {};
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.timeRange = []
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                supplierName: null,
                supplierTypeCode: null,
                businessTypeCode: null,
                availableStatus: null,
                approvalStatus: null,
                cityName: null,
                submitStartTime: null,
                submitEndTime: null,
                contractTerm: null,
            },
                // this.resetForm("queryForm");
                this.handleQuery();
        },

        /** 新增操作 */
        handleAdd() {
            // this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.push({
                name: 'VendorAdd',
                query: {type: 'write', pageType: '新增供应商'}
            })
        },

        handleDetail(row) {
            this.$router.push({
                // name:'vendorDetail',
                name: 'VendorAdd',
                query: {supplierId: row.supplierId, type: 'readonly', pageType: '供应商详情'}
            })
        },

        handleExchange(row) {
            // this.reset();
            // this.open = true;
            // this.form = row
            // this.title = "业务分类变更";

            this.$router.push({
                name: 'VendorAdd',
                query: {supplierId: row.supplierId, type: 'write', pageType: '供应商变更'}
            })
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.$router.push({
                name: 'VendorAdd',
                query: {supplierId: row.supplierId, type: 'write', pageType: '编辑供应商'}
            })
        },

        /** 导出按钮操作 */
        handleExport() {
            this.download('/supplier/supplier/export', {
                ...this.queryParams
            }, `供应商列表.xlsx`)
        },

        importData(){
            this.$UploadDialog({
                title: "导入供应商",
                showtoastSureBtn: false,
                showResult: true,
                showErrorFeedback: false,
                uploadConfig: {
                    uploadFileUrl: `#${IMPORTVENDOR}`,
                    limit: 1,
                    params: {},
                    fileType: ['xls', 'xlsx'],
                    templateUrl: `${TEMPLATEDRIVER('supplier_export')}`,
                    templateName: `供应商-导入模版.xlsx`,
                },
            }).finally(f => {
                this.handleQuery()
            })
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            // this.$modal.confirm('确定删除？').then(() => {
            //     this.loading = true;
            //     return supplierDelete(row.supplierId);
            // }).then(() => {
            //     this.loading = false;
            //     this.handleQuery();
            //     this.$modal.msgSuccess("删除已提交");
            // }).finally(() => {
            //     this.loading = false;
            // });

            this.$prompt('删除理由', '确定删除?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPlaceholder:"删除理由为必填项",
                inputPattern: /^(?!\s+$).{1,500}$/,
                inputErrorMessage: '备注不能为空且不能大于500字'
            }).then(({value}) => {
                this.loading = true;
                return supplierDelete({supplierIds:row.supplierId, delRemark:value});
            }).then(() => {
                this.loading = false;
                this.handleQuery();
                this.$modal.msgSuccess("删除已提交");
            }).finally(() => {
                this.loading = false;
            });

        },

        /** 提交按钮 */
        submitForm() {
            let that = this
            // this.form.businessTypeCode = this.form.businessTypeCodeList && this.form.businessTypeCodeList.join(",")

            this.$refs["form"].validate(valid => {
                if (valid) {
                    that.buttonLoading = true;
                    supplierUpdate(that.form).then(res => {
                        that.open = false
                        that.buttonLoading = false;
                        that.$modal.msgSuccess("提交成功");
                        that.handleQuery()
                    }).finally(e => {
                        that.buttonLoading = false;
                    })
                }
            });
        },

    }
};
</script>


<style lang="scss" scoped>
.pagination-container {
    padding: 0 20px 50px !important;
}


.form-dialog {
    ::v-deep .el-dialog__header {
        padding: 10px 20px;
        border-bottom: 1px solid #DCDFE6;

        .el-dialog__headerbtn {
            top: 15px;
        }
    }

    .box-card {
        margin-bottom: 20px;

        .card-title {
            font-size: 16px;
            position: relative;
            margin-left: 8px;
            padding: 0;
        }

        .card-title::after {
            content: '';
            width: 4px;
            height: 18px;
            background-color: aqua;
            display: block;
            position: absolute;
            left: -12px;
            top: 2px;
        }
    }

}
</style>
